<template>
  <el-image :style="`width: ${width}; height: ${height};`" :src="tempUrl" :fit="fit"></el-image>
</template>
<script>
import * as fileHttp from '@/api/file';

export default {
  name: 'cImage',
  props: {
    width: {
      default: '178px'
    },
    height: {
      default: '178px'
    },
    imageId: {
      required: true,
      type: [String, Number]
    },
    fit: {
      type: [String, undefined],
      default: 'contain'
    }
  },
  data() {
    return {
      tempUrl: ''
    };
  },
  created() {
    this.getFileInfo()
  },
  methods: {
    async getFileInfo() {
      this.tempUrl = '';
      if (!this.imageId) return void 0;
      try {
        const res = await fileHttp.getFileInfo({ fileId: this.imageId });
        this.tempUrl = res.data.fullUrl;
      } catch (e) {
        console.log('Image/index: cImage: ', e);
      }

    }
  },
  watch: {
    imageId(value) {
      this.getFileInfo();
    }
  }
}
</script>
